<template>
  <div>
    <DarkThemeLogin v-if="isDarkTheme" />
    <LightThemeLogin v-else />
    <ThemeSwitch class="theme-switch" />
  </div>
</template>

<script>
import { fetchData } from "@/utils";
import { login } from "@/api/auth";

import { mapState, mapActions } from "vuex";
import { actions } from "@/store/modules/authStore";

import ThemeSwitch from "@/business-components/ThemeSwitch.vue";
import DarkThemeLogin from "./components/DarkThemeLogin.vue";
import LightThemeLogin from "./components/LightThemeLogin.vue";

export default {
  name: "Login",
  components: { ThemeSwitch, DarkThemeLogin, LightThemeLogin },
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "change" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    ...mapState("themeStore", ["isDarkTheme"]),
  },
  methods: {
    ...mapActions("authStore", [actions.UPDATE_USER_INFO]),
    onClickLogin() {
      this.$refs.elform.validate().then(() => {
        fetchData(login, this.form).then((data) => {
          this.updateUserInfo(data);
          this.$router.push({ path: "/" });
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.theme-switch {
  position: fixed;
  right: 20px;
  top: 20px;
}
</style>
